<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伸缩容器_复合属性</title>
  <style>
    body{
      display: flex;
    }
    .outer{
      width: 1000px;
      height: 600px;
      background-color: gray;
        /*开启弹性盒子*/
      display:flex;
        /*主轴方向*/
      flex-direction: row;
        /*主轴换行方式*/
      flex-wrap: wrap;
        /*主轴对齐方式:justify-content
        flex-start:主轴的起始位置紧挨着填充
        flex-end:主轴的结束位置紧挨着填充
        center:主轴中间对齐
        space-around:项目均匀分布在一行中,项目与项目之间的距离是项目距离边缘的两倍(自动计算并排布)
        space-between:项目均匀分布在一行中,项目与项目之间的距离是相等的,项目距边缘没有距离
        space-evenly:项目均匀分布在同一行

        */
        justify-content: space-around;
    }
    .inner{
      width: 200px;
      height: 200px;
      border: 1px solid black;
      box-sizing: border-box;
      background-color: skyblue;
    }
  </style>
</head>
<body>
<div class="outer">
  <div class="inner">1</div>
  <div class="inner">2</div>
  <div class="inner">3</div>
</div>
</body>
</html>